<template>
  <div class="singerList">
    <singer-tab ref="tabs" :tabConfig="tabConfig">
      <!-- <singer-song></singer-song> -->
      <!-- <singer-mv></singer-mv> -->
      <!-- <simple-singer></simple-singer> -->
      <component :is="currentComponent"></component>
      <!-- <singer-info></singer-info> -->
    </singer-tab>
  </div>
</template>

<script setup lang="ts">
import singerTab from '@/components/tab.vue'
import singerSong from './singerProd/singerSong.vue'
import singerMv from './singerProd/singerMV.vue'
import singerInfo from './singerProd/singerInfo.vue'
import simpleSinger from './singerProd/simpleSinger.vue'
import { computed, ref, nextTick } from 'vue'
import { useRoute } from 'vue-router'
const tabConfig = ['专辑', 'MV', '歌手详情', '相似歌手']
const tabs = ref({ currentIndex: 0 })
const currentComponent = computed(() => {
  const allIndex = [singerSong, singerMv, singerInfo, simpleSinger]
  return allIndex[tabs.value.currentIndex * 1]
})
</script>

<style lang="scss" scoped>
.singerList {
  margin-top: 20px;
}
</style>